<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>表格</title>
    <style>
        table th {
            border: 1px solid black;
            box-sizing: border-box;
            width: 80px;
            height: 30px;
        }
        
        table td {
            width: 80px;
            height: 30px;
            border: 1px solid black;
            box-sizing: border-box;
            text-align: center;
        }
    </style>
</head>

<body>
    <button id="btn">添加一条新的访客信息</button>
    <button id="btn2">删除选中</button>
    <button id="btn3">年龄从小到大排序</button>
    <table cellspacing="0" cellpadding="5">
        <thead>
            <tr>
                <th>序列号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
                <th>选择</th>
            </tr>
        </thead>
    </table>
    <script>
        var info = [{
            name: "胡杭",
            age: 16
        }, {
            name: "胜明",
            age: 22
        }, {
            name: "军毅",
            age: 21
        }, {
            name: "晓华",
            age: 13
        }, {
            name: "盛聪",
            age: 23
        }, {
            name: "侦剑",
            age: 32
        }, {
            name: "红翔",
            age: 25
        }, {
            name: "超维",
            age: 18
        }, {
            name: "士琪",
            age: 22
        }, {
            name: "艳华",
            age: 20
        }];
        let table = document.querySelector("table")
        let btn = document.getElementById("btn")
        let btn2 = document.getElementById("btn2")
        let btn3 = document.getElementById("btn3")
        let num = 0;
        btn.onclick = function() {
            if (num < info.length) {
                let tr = document.createElement("tr");
                tr.innerHTML = "<td>" + (num + 1) + "</td>" + "<td>" + info[num].name + "</td>" + "<td>" + info[num].age + "</td>" + "<td>" + "<button class='btn1'>删除</button>" + "<td><input type='checkbox' id='checkbox'></td>" + "</td>";
                table.appendChild(tr);

                num++;
            }
            let btn1 = document.getElementsByClassName('btn1');
            console.log(btn1)
            for (let i = 0; i < btn1.length; i++) {
                btn1[i].onclick = function() {
                    this.parentElement.parentElement.remove();
                }
            }
        }
        btn3.onclick = function() {
            for (i = 0; i < info.length; i++) {
                if (info[0].age < info[i].age) {
                    console.log(info[0]);
                }
            }
        }
    </script>
</body>

</html>